<template>
  <div class="nav-wx">
    <svg-icon icon-class="wechat"  @click="chanageMp"/>
    <!-- 添加或修改租户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-select v-model="wxMpAppid" clearable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.appid"
          :label="item.name"
          :value="item.appid">
        </el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitMp">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { accountList } from "@/api/wx"
export default {
  name: 'NavWx',
  data() {
    return {
      title: '选择公众号',
      open: false,  // 是否显示弹出层
      options: [],
      wxMpAppid: '',
      currentItem : {name: '',appid:''}
    };
  },
  computed: mapState({
    selectedAppid: state=>state.wxAccount.selectedAppid
  }),
  created(){
    this.wxMpAppid = this.selectedAppid
    console.log(this.wxMpAppid)
    accountList().then(response => {
      this.options = response.data
    })
  },
  methods: {
    chanageMp(){
      this.open = true
    },
    submitMp(){
      console.log(this.wxMpAppid)
      this.currentItem = this.options.find( (item) => item.appid == this.wxMpAppid)
      console.log(this.currentItem)
      this.$store.commit('wxAccount/selectAccount',this.currentItem)
      this.$modal.msgSuccess("切换成功");
      this.open = false
    },
    cancel(){
      this.open = false
    }
  }
};
</script>

<style lang="scss">

</style>
